<template>
  <el-dialog :title="showTitle" :visible="showDialog" @close="close">
    <el-form ref="addPermission" :model="formData" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="权限名称">
        <el-input v-model="formData.name" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item prop="code" label="权限标识">
        <el-input v-model="formData.code" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item prop="description" label="权限描述">
        <el-input v-model="formData.description" type="textarea" :rows="2" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item prop="enVisible" label="开启">
        <!-- 如果不需要校验 就不需要写 prop属性，但重置表单仍需要 prop -->
        <!-- active-value="1" 前不加冒号 是字符串，加冒号 是数字  -->
        <el-switch v-model="formData.enVisible" :active-value="1" :inactive-value="0" size="mini" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="btnOK">确定</el-button>
            <el-button size="mini" @click="close">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updatePermissionDetail, getPermissionList, addPermission, getPermissionDetail } from '@/api/permission'
export default {
  props: {
    showDialog: {
      type: Boolean,
      defaule: false
    },
    currentNodeId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      formData: {
        name: '', // 权限点名字 校验：权限点"名字"不能和子集们现有的权限点名字重复
        code: '', // 权限点标识 校验: 权限标识不能和所有人重复, 应该是唯一的标识
        description: '', // 权限点描述
        type: 1, // 权限点类型 1为页面路由权限点, 2为按钮权限点
        pid: 0, // 权限点父级id 页面权限点pid值为'0', 按钮权限点值为所属页面权限点的id值
        enVisible: 0 // 权限点开启状态 0关闭, 1开启. (暂时无需判断, 前端逻辑上默认全都有效直接用)
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          validator: async(rule, value, callback) => {
            let res = await getPermissionList()
            // 判断是否编辑模式
            if (this.formData.id) {
              res = res.filter(item => item.id !== this.formData.id)
            }
            // res数组中是否存在value值
            if (res.some(item => item.name === value)) {
              callback(new Error('权限中已有该名称'))
            } else {
              callback()
            }
          }
        }],
        code: [{ required: true, message: '角色标识不能为空', trigger: 'blur' }, {
          trigger: 'blur',
          validator: async(rule, value, callback) => {
            // 数组中是否存在value值
            let res = await getPermissionList()
            // 判断是否编辑模式
            if (this.formData.id) {
              res = res.filter(item => item.id !== this.formData.id)
            }
            // res数组中是否存在value值
            if (res.some(item => item.code === value)) {
              callback(new Error('权限中已有该标识'))
            } else {
              callback()
            }
          }
        }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑权限' : '新增权限'
    }
  },
  // created() {},
  methods: {
    close() {
      this.formData = {
        name: '', // 权限点名字 校验：权限点"名字"不能和子集们现有的权限点名字重复
        code: '', // 权限点标识 校验: 权限标识不能和所有人重复, 应该是唯一的标识
        description: '', // 权限点描述
        type: 1, // 权限点类型 1为页面路由权限点, 2为按钮权限点
        pid: 0, // 权限点父级id 页面权限点pid值为'0', 按钮权限点值为所属页面权限点的id值
        enVisible: 0 // 权限点开启状态 0关闭, 1开启. (暂时无需判断, 前端逻辑上默认全都有效直接用)
      }
      this.$refs.addPermission.resetFields() // 重置表单
      this.$emit('update:showDialog', false)
    },
    btnOK() {
      this.$refs.addPermission.validate(async isOK => {
        if (isOK) {
          let msg = '新增'
          // 通过formData中id
          if (this.formData.id) {
            // 编辑场景
            msg = '更新'
            await updatePermissionDetail(this.formData)
          } else {
            // 新增场景
            msg = '新增'
            if (this.currentNodeId !== 0) {
              this.formData.pid = this.currentNodeId
              this.type = 2
            }
            await addPermission(this.formData)
          }
          this.$emit('updatePermission')
          this.$message.success(`${msg}权限成功`)
          this.close()
        }
      })
    },
    async getPermissionDetail() {
      this.formData = await getPermissionDetail(this.currentNodeId)
    }
  }
}

</script>
